<template>

	<view class="container">
		<button @click="handleTap" :class="{ doubleTap: isDoubleTap }">点赞</button>
		<image v-if="showHeart" src="/static/探索图标/红爱心.png" class="heart-animation" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tapCount: 0,
				tapTimer: null,
				isDoubleTap: false,
				showHeart: false
			};
		},
		onPullDownRefresh() {
			// 下拉刷新的逻辑  
			console.log("123456")
		},
		methods: {
			handleTap() {
				this.tapCount++;
				if (this.tapCount === 1) {
					// 第一次点击，设置计时器  
					this.tapTimer = setTimeout(() => {
						this.tapCount = 0; // 重置点击次数  
						this.isDoubleTap = false; // 重置双击状态  
					}, 200); // 设定双击的时间间隔，比如200毫秒  
				} else if (this.tapCount === 2) {
					// 如果在短时间内发生了第二次点击，则认为是双击  
					clearTimeout(this.tapTimer); // 清除计时器  
					this.isDoubleTap = true; // 设置双击状态为true  
					this.tapCount = 0; // 重置点击次数  
					this.showHeart = true; // 显示小心心  
					// 你可以在这里添加发送点赞请求的代码  

					// 小心心显示一段时间后隐藏  
					setTimeout(() => {
						this.showHeart = false;
					}, 1000); // 设定小心心显示的持续时间，比如1秒  
				}
			}
		}
	};
</script>


<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	button {
		padding: 10px 20px;
		background-color: #f4f4f4;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	.doubleTap {
		/* 这里可以添加双击时的样式变化，比如放大、变色等 */
		transform: scale(1.1);
	}

	.heart-animation {
		width: 100rpx;
		/* 根据你的小心心图片大小调整 */
		height: 100rpx;
		/* 根据你的小心心图片大小调整 */
		margin-top: 100rpx;
		animation: heartBounce 1s ease-in-out forwards;
		/* 添加动画效果 */
	}

	@keyframes heartBounce {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		50% {
			transform: scale(1.2);
			opacity: 0.8;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}
</style>